<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>钱包</title>
    <link href="./weui/weui.css" rel="stylesheet">
	<link href="./weui/weui2.css" rel="stylesheet">
    <script src="./weui/zepto.min.js"></script>
    <style>
    html{font-size:75px;}
    body{background:#f8f8f8;}
    .qbheader{background:#d9b20c;}
    .xfmx{line-height:1rem;background:#cfa908;text-align: right;}
    .xfmx a{line-height:1rem;font-size:.5rem;color:#ffffff;}
    .xfmx span{margin:0 15px 0 10px;}
    .qbyue{padding:1.4rem 0;text-align: center;color:#ffffff;}
    .qbyue strong{font-size:1rem;display: block;}
    .qbyue  span{font-size:.45rem;display: block;}
    .qblist{padding:.34rem .5rem;}
    .qbcartitem{background:#ffffff;position: relative;margin-bottom:.34rem;overflow: hidden;}
    .leftinfo{padding:.6rem;color:#ffffff;}
    .leftinfo h2{font-size:.7rem;}
    .leftinfo a{color:#ffffff;font-size:.45rem;display: block;}
    .cart1{background:#52acd1;}
    .cart2{background:#41b763;}
    .cart3{background:#fcb225;}
    .cart4{background:#fc2425;}
    .czinfo::after, .czinfo::before{position:absolute;width:16px;height:16px;border-radius: 8px;background:#f8f8f8;top:-8px;left:-8px;display: block;content: "";}
    .czinfo::before{bottom:0px;top:initial;margin-top:100%;}
    .czinfo{height:2rem;padding:.6rem .4rem;background:#ffffff;position: absolute;right:0;top:0;font-size:.5rem;}
    .czinfo a{color:#f25745;display: block;margin-top:26%;}
    .alertwp{position: fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.8);}
    .alertcent{background:#ffffff;margin:30% auto;width:80%;border-radius: 10px;position:relative;padding:.8rem;box-sizing: border-box;text-align: center;}
    .alertcent .close{position:absolute;font-size:1rem;color:#afafaf;left:.5rem;top:.3rem;}
    .alertcent h3{font-size:.5rem;text-align: center;font-weight: normal;color:#000;margin-top:.5rem;}
    .alertcent p{color:#fe943f;font-size:.56rem;font-weight: bold;text-align: center;margin-top:.5rem;}
    .alertcent a{text-align: center;margin:1rem auto 0;font-size:.45rem;color:#ffffff;background:#006d46;border-radius: 10px;line-height:1.4rem;padding:0 2rem;display: inline-block;}
        @media screen and (max-width: 640px) {
			html{font-size:64px;}
		}
		@media screen and (max-width: 414px) {
			html{font-size:41px;}
		}
		@media screen and (max-width: 375px) {
			html{font-size:37px;}
		}
		@media screen and (max-width: 320px) {
			html{font-size:32px;}
		}
    </style>
</head>
<body>
    
    <div class="qbheader">
        <div class="qbyue">
            <strong>105.00</strong>
            <span>可用余额</span>
        </div>
        <div class="xfmx"><a href="">消费明细<span><img src="./weui/images/linktag.png" width="10px;" alt=""></span></a></div>
    </div>
    <div class="qblist">
        <div class="qbcartitem cart1">
            <div class="leftinfo">
                <h2>充1万送5000</h2>
                <a href="">点击查看详情权益</a>
            </div>
            <div class="czinfo"><a href="">立即充值</a></div>
        </div>
        <div class="qbcartitem cart2">
            <div class="leftinfo">
                <h2>充1万送5000</h2>
                <a href="">点击查看详情权益</a>
            </div>
            <div class="czinfo"><a href="">立即充值</a></div>
        </div>
        <div class="qbcartitem cart3">
            <div class="leftinfo">
                <h2>充1万送5000</h2>
                <a href="">点击查看详情权益</a>
            </div>
            <div class="czinfo"><a href="">立即充值</a></div>
        </div>
        <div class="qbcartitem cart4">
            <div class="leftinfo">
                <h2>充1万送5000</h2>
                <a href="">点击查看详情权益</a>
            </div>
            <div class="czinfo"><a href="">立即充值</a></div>
        </div>
    </div>

    <div class="alertwp">
        <div class="alertcent">
            <span class="close">×</span>
            <h3>温馨提醒</h3>
            <p>2万以上充值，请联系管家</p>
            <a href="">查看管家</a>
        </div>
    </div>
</body>
</html>